<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <!-- 头部内容 -->
      <div class="top-content">
        <div class="top-name">工作台</div>
      </div>
      <!-- 中间内容 -->
      <div class="center-content">
        <!-- 中间内容 -->
        <!-- 转移管理  -->
        <div class="router-maxbox">
          <div class="router-box" @click="goRouter(item)" v-for="(item, index) in transferList" :key="index">
            <div class="router-img"><img :src="item.img" alt="" /></div>
            <div class="router-title">{{ item.name }}</div>
          </div>
        </div>
        <!-- 鱼池管理  -->
        <div class="router-maxbox">
          <div class="router-box" @click="goRouter(item)" v-for="(item, index) in tailwaterfiltrationList" :key="index">
            <div class="router-img"><img :src="item.img" alt="" /></div>
            <div class="router-title">{{ item.name }}</div>
          </div>
        </div>
        <!-- 入库管理  -->
        <div class="router-maxbox">
          <div class="router-box" @click="goRouter(item)" v-for="(item, index) in stockManagementList" :key="index">
            <div class="router-img"><img :src="item.img" alt="" /></div>
            <div class="router-title">{{ item.name }}</div>
          </div>
        </div>
        <!-- 出库管理  -->
        <div class="router-maxbox">
          <div class="router-box" @click="goRouter(item)" v-for="(item, index) in deliveryRecordList" :key="index">
            <div class="router-img"><img :src="item.img" alt="" /></div>
            <div class="router-title">{{ item.name }}</div>
          </div>
        </div>
        <!-- 鲟鱼调整管理  -->
        <!-- <div class="router-maxbox">
          <div class="router-box" @click="goRouter(item)" v-for="(item, index) in adjustmentManagementList" :key="index">
            <div class="router-img"><img :src="item.img" alt="" /></div>
            <div class="router-title">{{ item.name }}</div>
          </div>
        </div> -->
      </div>
      <!-- 底部内容 -->
      <div class="bottom-content">
        <div class="workbench" @click="changeActiveIndex(1)" :style="activeIndexO == 1 ? 'color: #3d8ffd;' : ''">
          <div class="bottom-icon"><i class="el-icon-menu"></i></div>
          工作台
        </div>
        <div class="my-self" @click="changeActiveIndex(2)" :style="activeIndexO == 2 ? 'color: #3d8ffd;' : ''">
          <div class="bottom-icon"><i class="el-icon-user"></i></div>
          我的
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isFullscreen } from "@/utils/fullscreen";
export default {
  name: "ipadLayout",
  data() {
    return {
      iFullScreen: true,
      transferList: [
        //转移管理
        {
          name: "尾水处理监控",
          img: require("../../../assets/pad/filtration.png"),
          router: "filtration",
        },
        {
          name: "内部转移单",
          img: require("../../../assets/pad/transferIn.png"),
          router: "transfer",
          type: 0, // 区分内部转移/基地调拨
        },
        {
          name: "采购入库单",
          img: require("../../../assets/pad/procurement.png"),
          router: "stockInProcurement",
          typeData: {
            name: "采购入库",
            type: 0, // 区分入库类型
          },
        },
        {
          name: "投网入库单",
          img: require("../../../assets/pad/CGJHD.png"),
          router: "stockInNet",
          typeData: {
            name: "投网入库",
            type: 1,
          },
        },
        {
          name: "其他入库单",
          img: require("../../../assets/pad/RK.png"),
          router: "stockInOther",
          typeData: {
            name: "其他入库",
            type: 2,
          },
        },
        {
          name: "加工出库单",
          img: require("../../../assets/pad/stockOut.png"),
          router: "stockOutProcess",
          typeData: {
            name: "加工出库",
            type: 0,
          },
        },
      ],
      tailwaterfiltrationList: [
        {
          name: "销售出库单",
          img: require("../../../assets/pad/transferOut.png"),
          router: "stockOutSales",
          typeData: {
            name: "销售出库",
            type: 1,
          },
        },
        {
          name: "死亡出库单",
          img: require("../../../assets/pad/stockOut.png"),
          router: "stockOutDeath",
          typeData: {
            name: "死亡出库",
            type: 2,
          },
        },
        {
          name: "其他出库单",
          img: require("../../../assets/pad/FHD.png"),
          router: "stockOutOther",
          typeData: {
            name: "其他出库",
            type: 3,
          },
        },
        {
          name: "鲟鱼调整单",
          img: require("../../../assets/pad/adjustment.png"),
          router: "adjustmentFish",
          typeData: {
            name: "鲟鱼调整",
          },
        },
        {
          name: "重量调整单",
          img: require("../../../assets/pad/adjustment.png"),
          router: "adjustmentWeight",
          typeData: {
            name: "重量调整",
          },
        },
        {
          name: "基地调拨单",
          img: require("../../../assets/pad/transferOut.png"),
          router: "allot",
          typeData: {
            name: "基地调拨",
            type: 1,
          },
        },
      ],
      stockManagementList: [
        //入库管理
        {
          name: "实时监测",
          img: require("../../../assets/pad/DBD.png"),
          router: "monitor",
          typeData: {
            name: "0",
            type: 0,
          },
        },
        {
          name: "报警记录",
          img: require("../../../assets/pad/procurement.png"),
          router: "alarmRecord",
          typeData: {
            name: "0",
            type: 1,
          },
        },
        {
          name: "巡检任务",
          img: require("../../../assets/pad/DBDLU.png"),
          router: "Inspection",
        },
        {
          name: "库存盘点",
          img: require("../../../assets/pad/DBDLU.png"),
          router: "",
        },
        {
          name: "客户管理",
          img: require("../../../assets/pad/KH.png"),
          router: "",
        },
        {
          name: "供应商管理",
          img: require("../../../assets/pad/GYS.png"),
          router: "",
        },
      ],
      deliveryRecordList: [
        {
          name: "外调单",
          img: require("../../../assets/pad/transferOut.png"),
          router: "",
        },
        {
          name: "点数记录",
          img: require("../../../assets/pad/DSJL.png"),
          router: "",
        },
      ],
      // adjustmentManagementList: [
      //   //调整管理列表
      //   {
      //     name: "鲟鱼调整单",
      //     img: require("../../../assets/pad/adjustment.png"),
      //     router: "/adjustment/home",
      //   },
      //   {
      //     name: "重量调整单",
      //     img: require("../../../assets/pad/adjustment.png"),
      //     router: "/adjustment/home",
      //   },
      //   {
      //     name: "重量调整单",
      //     img: require("../../../assets/pad/adjustment.png"),
      //     router: "/adjustment/home",
      //   },
      //   {
      //     name: "重量调整单",
      //     img: require("../../../assets/pad/adjustment.png"),
      //     router: "/adjustment/home",
      //   },
      //   {
      //     name: "重量调整单",
      //     img: require("../../../assets/pad/adjustment.png"),
      //     router: "/adjustment/home",
      //   },
      //   {
      //     name: "重量调整单",
      //     img: require("../../../assets/pad/adjustment.png"),
      //     router: "/adjustment/home",
      //   },
      // ],
      activeIndexO: 1, //用于改变bottom-icon的颜色
    };
  },
  mounted() {
    // const element = document.getElementById("content");
    // if (!screenfull.isEnabled) {
    //   //提醒 无法全屏浏览
    //   this.$message({ message: "你的浏览器不支持全屏模式", type: "warning" });
    //   return false;
    // } else {
    //   screenfull.toggle();
    // }
    if (!isFullscreen()) {
      let ele = document.body;
      if (ele.requestFullscreen) {
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
      }
    }
  },
  methods: {
    // 当鼠标点击时通过改变activeIndex0来改变颜色
    changeActiveIndex(index) {
      this.activeIndexO = index;
    },
    // 路由之间的跳转
    goRouter(item) {
      this.$router.push({
        name: item.router,
        query: item.typeData,
      });
    },
  },
};
</script>

<style lang="less" scoped>
// * {
//   padding: 0;
//   margin: 0;
// }

.main-container {
  background-color: #f4f8f9;
  height: 100%;
  position: relative;

  .main-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;

    .top-content {
      width: 100%;
      height: 10rem;
      line-height: 10rem;
      // margin-bottom: 2rem;
      background-color: #045cad;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: "微软雅黑";

      // position: absolute;
      // top: 0;
      // left: 0;
      // border: 1px solid red;
      .el-icon-full-screen {
        display: flex;
        margin-top: 5rem;
        margin-left: 5rem;
        // justify-content: center;
      }

      .top-name {
        font-size: 4rem;
        font-weight: 400;
      }
    }

    .center-content {
      width: 95%;
      height: calc(83vh - 100px);
      background-color: #ffffff;
      border-radius: 12px;
      // display: flex;
      // justify-content: center;
      margin: 2rem;
      text-align: center;
      overflow-y: auto;

      .router-maxbox {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        height: 10rem;
        margin: 7rem 2rem;
        // margin: 2rem 8rem;
        // text-align: center;

        .router-box {
          display: grid;
          width: 15rem;
          height: 15rem;
          text-align: center;
          align-content: center;
          cursor: pointer;

          .router-img {
            img {}
          }

          .router-title {
            margin-top: 0.5rem;
            font-size: 2.06rem;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }

    .bottom-content {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 10rem;
      width: 100%;
      background-color: #ffffff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-content: center;
      text-align: center;

      .bottom-icon {
        font-size: 4rem;
        cursor: pointer;
      }
    }
  }
}
</style>
